$(function() {
    // alert(11);
    // 1. 按下回车 把完整数据 存储到本地存储里面
    // 存储的数据格式  var todolist = [{title: "xxx", done: false}]
    load();
    $(".todowork").hide();
    $("#title").on("keydown", function(event) {
        if (event.keyCode === 13) {
            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {
                // 先读取本地存储原来的数据
                var local = getDate();
                // console.log(local);
                // 把local数组进行更新数据 把最新的数据追加给local数组
                local.push({ title: $(this).val(), done: false });
                // console.log(local);
                // 把这个数组local 存储给本地存储
                saveDate(local);
                // 2. toDoList 本地存储数据渲染加载到页面
                load();
                $(this).val("");
                $(".todowork").hide();
            }
        }
    });
    load_1();
    $("textarea").on("blur", function(event) {
        // 先读取本地存储原来的数据
        // if (event.keyCode === 13) {
        var local = getDate_1();
        local.push({ title: $(this).val(), done: false });
        saveDate_1(local);
        // }
    });
    $("#plan").on("keydown", function(event) {
        if (event.keyCode === 13) {
            if ($(this).val() === "") {
                alert("请输入您要的操作");
            } else {
                $("#section li").each(function() {
                    var character = $("#plan").val();
                    //用正则表达式判断的时候，需要定义一个正则对象
                    var cREP = new RegExp(character);
                    var pValue = $(this).find("p").text();
                    if (cREP.test(pValue)) {
                        $("#section li").each(function() {
                            $(this).css("background", "white");
                        });
                        $(this).css("background", "rgba(3, 248, 236, 0.98)");
                    }
                });
            }
            $("#plan").val("");
        }
    })
    $("#buttom-ten").on("click", function() {
        $(".todowork").show();
    })
    $("#todolist li:first").css("background", "rgba(3, 248, 236, 0.98)");
    $("#todolist li:first").find("textarea").css("display", "block");
    $("#todolist li:first").find("textarea").css("top", -72 + "px");
    $("#section").on("click", "li", function() {
            index = $(this).index();
            console.log(index)
            var character = $("#plan").val();
            //用正则表达式判断的时候，需要定义一个正则对象
            var cREP = new RegExp(character);
            var pValue = $(this).find("p").text();
            if (cREP.test(pValue)) {
                $("#section li").each(function() {
                    $(this).css("background", "white");
                });
                $(this).css("background", "rgba(3, 248, 236, 0.98)");
            }
        })
        // 3. toDoList 删除操作
    $("ol, ul").on("click", "a", function() {
        // alert(11);
        // 先获取本地存储
        var data = getDate();
        // console.log(data);
        // 修改数据
        var index = $(this).attr("id");
        // console.log(index);
        data.splice(index, 1);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });
    //补充：修改操作
    $("ol,ul").on("click", "h6", function() {
            // alert(1111);
            //先获得本地储存
            $(".serious").fadeIn(666);
            var data = getDate();
            // console.log(data);
            // 修改数据
            var index = $(this).siblings("a").attr("id");
            // console.log(index);
            // 获得修改内容
            // var right = $(".second").val();
            // console.log(right);
            // data[index].title = right;
            // 保存到本地存储
            $(".serious-third").on("click", function() {
                if ($(".second").val().length == 0) {

                } else {
                    var right = $(".second").val();
                    // console.log(right);
                    // console.log(index)
                    data[index].title = right;
                    saveDate(data);
                    // 重新渲染页面
                    load();
                }
            })
            $(".second").val("");
        })
        // 4. toDoList 正在进行和已完成选项操作
    $("ol, ul").on("click", "input", function() {
        // alert(11);
        // 先获取本地存储的数据
        var data = getDate();
        // 修改数据
        var index = $(this).siblings("a").attr("id");
        // console.log(index);
        // data[?].done = ?
        data[index].done = $(this).prop("checked");
        // console.log(data);
        // 保存到本地存储
        saveDate(data);
        // 重新渲染页面
        load();
    });
    // 读取本地存储的数据 
    function getDate() {
        var data = localStorage.getItem("todolist");
        if (data !== null) {
            // console.log(data);
            // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
            return JSON.parse(data);
        } else {
            return [];
        }
    }

    function getDate_1() {
        var data_1 = localStorage.getItem("concents");
        if (data_1 !== null) {
            // console.log(data_1);
            // 本地存储里面的数据是字符串格式的 但是我们需要的是对象格式的
            return JSON.parse(data_1);
        } else {
            return [];
        }
    }

    // 保存本地存储数据
    function saveDate(data) {
        localStorage.setItem("todolist", JSON.stringify(data));
    }

    function saveDate_1(data_1) {
        localStorage.setItem("concents", JSON.stringify(data_1));
    }
    // 渲染加载数据
    function load_1() {
        var data_1 = getDate_1();
        $.each(data_1, function(i, n) {
            $("textarea").val(n.title)
            $("textarea").empty();
        })
    }

    function load() {
        // 读取本地存储的数据
        var data = getDate();
        // console.log(data);
        // 遍历之前先要清空ol里面的元素内容
        $("ol, ul").empty();
        var todoCount = 0; // 正在进行的个数
        var doneCount = 0; // 已经完成的个数
        // 遍历这个数据
        $.each(data, function(i, n) {
            // console.log(n);
            if (n.done) {
                $("ul").prepend("<li><input type='checkbox' checked='checked' > <p>" + n.title + "</p><h6>修改</h6><a href='javascript:;' id=" + i + " >-</a></li>");
                doneCount++;
            } else {
                $("ol").prepend("<li><input type='checkbox' > <p>" + n.title + "</p><h6>修改</h6><a href='javascript:;' id=" + i + " >-</a></li>");
                todoCount++;
            }
            // <textarea cols=" + 110 + " rows=" + 48.9 + ">完成总结:</textarea>
        });
        $("#todocount").text(todoCount);
        $("#donecount").text(doneCount);
    }
    $(".serious").hide();
    $(".serious-third").on("click", function() {
            $(".serious").fadeOut(666);
        })
        // 头像和昵称的切换吧
    $(".transport").hide();
    $(".picture-second").on("click", function() {
        $(".transport").fadeIn();
    })
    $(".transport-ten").on("click", function() {
        $(".transport").fadeOut();
    })

    // loads();
    var itemsList = new Array();
    itemsList = { img: "" };
    // itemsList.sort = add_sort;

    if (localStorage.getItem("png") == null) {
        localStorage.setItem("png", JSON.stringify(itemsList))
    }
    var itemsList = JSON.parse(localStorage.getItem("png"));
    png.src = itemsList.img;
    $("#buttom-first").on("click", function ToBase64() {
        $(".transport").fadeOut();
        var img = document.getElementById('imgfile')
        var imgFile = new FileReader();
        var imgData;
        if (img.files[0] == null || img.files[0] == undefined || img.files[0] == "") {} else {
            imgFile.readAsDataURL(img.files[0]);
            imgFile.onload = function() {
                imgData = imgFile.result; //base64数据  
                itemsList.img = imgData;
                // console.log(itemsList);
                let str = JSON.stringify(itemsList);
                localStorage.setItem("png", str);
                // console.log(itemsList.name, str);
                var itemsList_1 = JSON.parse(localStorage.getItem("png"));
                var png = document.getElementById("png");
                png.src = itemsList_1.img;
            }

        }
    })

    var itemsLists = new Array();
    itemsLists = { name: "" };
    if (localStorage.getItem("picture-first") == null) {
        localStorage.setItem("picture-first", JSON.stringify(itemsLists))
    }
    var itemsList = JSON.parse(localStorage.getItem("picture-first"));
    $(".picture-first").text(itemsList.name);
    $("#buttom-second").on("click", function() {
        $(".transport").fadeOut();
        itemsLists.name = $("#inputs").val();
        console.log(itemsLists.name);
        let str = JSON.stringify(itemsLists);
        localStorage.setItem("picture-first", str);
        // console.log(itemsList.name, str);
        var itemsList_1 = JSON.parse(localStorage.getItem("picture-first"));
        // png.src = imgData;
        // console.log(itemsList);
        $(".picture-first").text(itemsList_1.name);
    })
    $(".serious-for").on("click", function() {
        $(".serious").hide();
    })
    $(".todowork-ten").on("click", function() {
        $(".todowork").hide();
    })
})